<x-addCustomer.universal>


<div class="w-100 text-center">
        <h3 class=" text-light">Connection Information</h3>
    </div>

    <div class="form-group col-sm-2" id="connection_info">
        <label for="passport_no" class="block pt-2">
            Cable type{{ checkRequired('cable_meter_required', '*') }}
        </label>
        <select name="cable_type" id="cable_type" class="form-control"
            {{ checkRequired('cable_meter_required', 'required') }}>
            <option value="">Select Cable Core Type</option>
            <option value="fiber_optic_2_core">Fiber Optic 2 Core</option>
            <option value="fiber_optic_4_core">Fiber Optic 4 Core</option>
            <option value="fiber_optic_6_core">Fiber Optic 6 Core</option>
            <option value="fiber_optic_8_core">Fiber Optic 8 Core</option>
            <option value="fiber_optic_12_core">Fiber Optic 12 Core</option>
            <option value="fiber_optic_24_core">Fiber Optic 24 Core</option>
        </select>
    </div>

    <div class="form-group col-sm-1">
        <label for="from_cable" class="block pt-2">
            From:
        </label>
        <input type="number" min="0" name="from_cable" id="from_cable" value="{{ old('from_cable') }}"
            class="form-control " placeholder="Start Number">
    </div>
    <div class="form-group col-sm-1">
        <label for="to_cable" class="block pt-2">
            To:
        </label>
        <input type="number" min="0" name="to_cable" id="to_cable" value="{{ old('to_cable') }}"
            class="form-control " placeholder="End Number">
    </div>

    <div class="form-group col-sm-1">
        <label for="from_cable2" class="block pt-2">
            From(2nd):
        </label>
        <input type="number" min="0" name="from_cable2" id="from_cable2" value="{{ old('from_cable2') }}"
            class="form-control " placeholder="Start Number">
    </div>
    <div class="form-group col-sm-1">
        <label for="to_cable2" class="block pt-2">
            To(2nd):
        </label>
        <input type="number" min="0" name="to_cable2" id="to_cable2" value="{{ old('to_cable2') }}"
            class="form-control " placeholder="End Number">
    </div>

    <div class="form-group col-sm-2">
        <label for="total" class="block pt-2">Total Cable(Meter)</label>
        <input type="text" name="required_cable" disabled value="0" id="total_cable_meter" class="form-control">
    </div>

    <div class="form-group col-sm-2">
        {{-- cable id --}}
        <label for="cable_id" class="block pt-2">
            Cable ID
        </label>
        <input type="text" name="cable_id" id="cable_id" value="{{ old('cable_id') }}"
            {{ checkRequired('cable_id', 'required') }} class="form-control " placeholder="Cable ID">

        <div class="alert alert-danger mt-1">message </div>


    </div>

    <div class="form-group col-sm-2">
        <label for="cat_type" class="block pt-2">
            Cable(CAT-5/CAT-6){{ checkRequired('cable_cat5_cat6_required', '*') }}
        </label>
        <select name="cat_type" id="cat_type" class="form-control select2"
            {{ checkRequired('cable_cat5_cat6_required', 'required') }}>
            <option value="">Select Cable Type</option>
            <option value="cat5">Cat 5</option>
            <option value="cat6">Cat 6</option>
        </select>
    </div>
    <div class="form-group col-sm-2">
        <label for="cat_length" class="block pt-2">
            Cable(CAT-5/CAT-6) Meter {{ checkRequired('cable_cat5_cat6_required', '*') }}
        </label>
        <input type="number" min="0" name="cat_length" id="cat_length" value="{{ old('cat_length') }}"
            class="form-control " placeholder="Cable Meter"
            {{ checkRequired('cable_cat5_cat6_required', 'required') }}>

        <div class="alert alert-danger mt-1">message </div>

    </div>




    <div class="form-group col-sm-3">
        <label for="onu_serial" class="block pt-2">
            ONU MAC/Pon No/Serial No {{ checkRequired('onu_serial_required', '*') }}
        </label>
        <input type="text" name="onu_serial" id="onu_serial" value="{{ old('onu_serial') }}" class="form-control "
            placeholder="ONU MAC/Serial No" {{ checkRequired('onu_serial_required', 'required') }}>

        <div class="alert alert-danger mt-1">message </div>

    </div>


    <div class="form-group col-sm-3">
        <label for="olt_pon" class="block pt-2">
            OLT no {{ checkRequired('olt_no_require', '*') }}
        </label>
        <input type="text" name="olt_pon" id="olt_pon" value="{{ old('olt_pon') }}" class="form-control "
            placeholder="OLT No" {{ checkRequired('olt_no_require', 'required') }}>

        <div class="alert alert-danger mt-1">message </div>

    </div>

    <div class="form-group col-sm-3">
        <label for="olt_no" class="block pt-2">
            OLT Card Slot Number {{ checkRequired('olt_port_number_required', '*') }}
        </label>
        <input type="text" name="olt_no" id="olt_no" value="{{ old('olt_no') }}" class="form-control "
            placeholder="OLT Card Slot number" {{ checkRequired('olt_port_number_required', 'required') }}>

        <div class="alert alert-danger mt-1">message </div>

    </div>

    <div class="form-group col-sm-3">
        <label for="pon_port" class="block pt-2">
            PON Module Port No {{ checkRequired('pon_module_required', '*') }}
        </label>
        <input type="text" name="pon_port" id="pon_port" value="{{ old('pon_port') }}" class="form-control "
            placeholder="PON Module Port No" {{ checkRequired('pon_module_required', 'required') }}>

        <div class="alert alert-danger mt-1">3306</div>

    </div>



    <div class="form-group col-sm-3">

        <label for="marketed_by" class="block pt-2">
            Marketed By
        </label>
        <div class="row">

            <div class="col-sm-8" id="marketedDiv">
                <select name="marketed_by" id="marketed_by" class="form-control select2">
                    <option value="">Select Marketer</option>

                    <option value="1">Imran Hossain

                    </option>
                    <option value="2">Kalam

                    </option>

                </select>
            </div>

            <div class="col-sm-4">
                <button type="button" class="btn btn-default" data-toggle="modal" data-target="#modal-default">
                    <i class="fa fa-plus"></i> Marketer
                </button>
            </div>

            <div class="text-center" id="modalAlert"></div>

            <div class="alert alert-danger mt-1">Imran</div>

        </div>



    </div>


    <div class="form-group col-sm-3">
        <label for="marketed_by" class="block pt-2">
            Source Name
        </label>
        <div class="" id="">
            <select name="source_name" id="source_name" class="form-control select2" required>
                <option value="">Select One</option>

                <option value="source">source</option>

            </select>
        </div>

        <div class="alert alert-danger mt-1">message </div>

    </div>

    <div class="form-group col-sm-3" id="otc_section" style="display: none">
        <div class="row">
            <div class="col-sm-12">
                <label for="otc" class="block pt-2">
                    Customer OTC
                </label>

                <input type="number" name="otc" id="otc" value="{{ old('otc') ?? '0' }}"
                    class="form-control " placeholder="Customer OTC">

                <div class="alert alert-danger mt-1">Otc Not Found</div>

            </div>

            <div class="col-md-6">
                <label for="otc" class="block pt-2">
                    Due OTC
                </label>

                <input type="number" name="otc_due" id="otc_due" value="{{ old('otc_due') ?? '0' }}"
                    class="form-control " placeholder="Due OTC">

                <div class="alert alert-danger mt-1">Due Otc 1208</div>

            </div>
        </div>
    </div>


    </x-addCustomer.universal>
