<?php
if (!isset($project_title)) $project_title = 'Sea Import Management';
if (!isset($addflag))       $addflag = 0;
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
    <title><?php echo $project_title; ?></title>
    <link rel="shortcut icon" href="assets/img/favicon.ico" type="image/x-icon">

    <!-- Tailwind CSS CDN -->
    <script src="https://cdn.tailwindcss.com"></script>

    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

    <!-- jQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <!-- Select2 -->
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

    <!-- DataTables -->
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>

    <!-- SweetAlert2 -->
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <!-- Flatpickr — powers the calendar popup on plain-text "dd-mm-yyyy" date
         fields (class="datepick"). Those fields never had any picker wired
         up before, so they just behaved like a bare text box. See init in
         includes/linksfoot.php. Native <input type="date"> fields (which
         also sometimes carry class="datepick" for shared styling) are left
         alone — the browser already gives them a working picker. -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

    <style>
        /* SweetAlert2 must always render above any custom modal (dispatch
           update, LR upload, search, etc.) — those use z-index up to 9999,
           so without this an alert triggered while a modal is open (e.g.
           "file too large") appears stuck behind it. */
        .swal2-container { z-index: 20000 !important; }

        /* Spinner removal for number inputs */
        .no-arrows::-webkit-outer-spin-button,
        .no-arrows::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
        .no-arrows { -moz-appearance: textfield; appearance: textfield; }

        /* Shared form input style — used in transaction/master pages inside iframe */
        .form-control {
            width: 100%;
            padding: 0.3rem 0.5rem;
            border: 1px solid #d1d5db;
            border-radius: 0.375rem;
            font-size: 0.8125rem;
            background: #fff;
            outline: none;
            transition: border-color .15s, box-shadow .15s;
        }
        .form-control:focus {
            border-color: #3b82f6;
            box-shadow: 0 0 0 3px rgba(59,130,246,.15);
        }
        .form-control:disabled {
            background: #f3f4f6;
            cursor: not-allowed;
        }

        /* Select2 height alignment */
        .select2-container .select2-selection--single {
            height: 30px;
            border: 1px solid #d1d5db;
            border-radius: 0.375rem;
        }
        .select2-container--default .select2-selection--single .select2-selection__rendered {
            line-height: 28px;
            font-size: 0.8125rem;
            color: #1f2937;
        }
        .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 28px;
        }
        .select2-container--default.select2-container--focus .select2-selection--single {
            border-color: #3b82f6;
            box-shadow: 0 0 0 3px rgba(59,130,246,.15);
        }

        /* Page label style */
        .marg { margin-bottom: 2px; font-size: 12px; font-weight: 600; color: #4b5563; }

        /* Global form label + input size boost — overrides per-page definitions */
        .lbl {
            font-size: 13px !important;
            font-weight: 600 !important;
            color: #374151 !important;
        }
        .finp {
            font-size: 13.5px !important;
            padding: 8px 12px !important;
            color: #1e293b !important;
        }
        /* Select2 global size boost */
        .select2-container .select2-selection--single {
            height: 36px !important;
        }
        .select2-container--default .select2-selection--single .select2-selection__rendered {
            line-height: 34px !important;
            font-size: 13.5px !important;
        }
        .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 34px !important;
        }

        /* App-wide action button colors (override per-page .abtn-* definitions) */
        .abtn-search { background:#7f5539 !important; }
        .abtn-print  { background:#4a5759 !important; }
        .abtn-edit   { background:#ffba08 !important; }
        .abtn-del    { background:#e71d36 !important; }

        /* ============================================================
           Responsive / mobile UI enhancements (visual only — applied
           globally via this shared include, no markup/behavior change)
           ============================================================ */
        html, body { -webkit-overflow-scrolling: touch; }
        body { overflow-x: hidden; }
        .grid-wrap, .dropdown-menu { -webkit-overflow-scrolling: touch; }

        /* Small/short screens: pin the action bar to the bottom of the
           viewport so it can never be hidden or scrolled out of reach.
           padding-bottom on the bar (and the reserve on body) adds
           env(safe-area-inset-bottom) so the last row of buttons doesn't
           end up under an iPhone home-indicator / Android gesture bar —
           that env() only resolves to a real value because the page's
           viewport meta now declares viewport-fit=cover. */
        @media (max-width: 900px), (max-height: 560px) {
            .btn-bar {
                position: fixed !important;
                left: 0 !important;
                right: 0 !important;
                bottom: 0 !important;
                z-index: 2000 !important;
                margin: 0 !important;
                border-radius: 0 !important;
                box-shadow: 0 -6px 20px rgba(15,23,42,.15) !important;
                background: #ffffff !important;
                overflow-x: auto !important;
                -webkit-overflow-scrolling: touch !important;
                flex-wrap: nowrap !important;
                justify-content: flex-start !important;
                padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
            }
            .btn-bar .abtn, .btn-bar button, .btn-bar a { flex-shrink: 0 !important; }
            /* Reserve space so the fixed bar never covers the last field/row */
            body { padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important; }
        }

        /* Phones: tighten spacing for a more modern, compact feel. Also
           fires on short-HEIGHT screens (not just narrow-WIDTH ones) —
           a phone rotated to landscape is wide (>640px) but short, and
           without this it kept the full-size action bar, which combined
           with a short viewport left only a sliver of it on screen. */
        @media (max-width: 640px), (max-height: 560px) {
            body { padding-left: 8px !important; padding-right: 8px !important; padding-top: 8px !important; }
            .sim-card { max-width: 100% !important; border-radius: 12px !important; }
            .sim-card-header { padding: 10px 14px !important; }
            .sim-body { padding: 10px 14px !important; }
            .btn-bar { padding-left: 12px !important; padding-right: 12px !important; padding-top: 8px !important; gap: 6px !important; }
            .btn-bar .abtn { padding: 0 14px !important; height: 38px !important; font-size: 12px !important; }
        }

        /* Very short landscape (address bar still showing): shrink further
           so the whole bar comfortably fits instead of getting clipped. */
        @media (max-height: 420px) {
            .btn-bar .abtn { height: 32px !important; font-size: 11.5px !important; }
            .sim-card-header { padding: 8px 12px !important; }
            .sim-body { padding: 8px 12px !important; }
        }

        /* Narrow (portrait) phones only — landscape already has plenty of
           width for label+field side by side. Stack the label above its
           input instead of forcing it into a fixed-width column, which is
           what was squeezing every input down to a sliver on a ~360-390px
           screen. Applies globally: .fr/.fr-2/.fr-half/.fr-pair/.lbl/.finp/.fl
           are the same building blocks used by every module and master/report
           filter page — .fr-half and .fr-pair are the two-field-per-row
           variants (e.g. Company Setup's GST No./PAN No. row) that were
           missing from this list, so on master pages that use them the two
           fields never got the mobile stack treatment and just kept
           shrinking to fit side by side on a narrow screen. */
        @media (max-width: 640px) {
            .fr, .fr-2, .fr-half, .fr-pair {
                display: flex !important;
                flex-direction: column !important;
                align-items: stretch !important;
                gap: 4px !important;
            }
            .fl { width: 100% !important; }
            .lbl {
                text-align: left !important;
                min-width: 0 !important;
                width: 100% !important;
                padding-right: 0 !important;
                margin-bottom: 0 !important;
            }
            .finp, .fl .select2-container, .select2-container { width: 100% !important; }
        }
    </style>

    <script>
        function focusFirstField() {
            var $fields = $('input.form, select.form, textarea.form')
                .filter(function() {
                    return !$(this).is('[disabled]') && !$(this).is('[readonly]');
                });
            if ($fields.length) $fields.first().focus().select();
        }

        $(document).ready(function () {
            <?php if ($addflag != 1) { ?>
                $('body').find('.form').attr('disabled', 'disabled');
            <?php } else { ?>
                focusFirstField();
            <?php } ?>

            $("#hedit").click(function () {
                $('body').find('.form').removeAttr('disabled');
                focusFirstField();
                $('#hprevious, #hnext, #hsearch, #hprint, #hadd, #hedit, #hdelete, #hexit').hide();
                $('#ssubmit, #scancel').css('display', '');
                $(".remove").show();
            });

            $('.select2').select2({ width: '100%' });
        });

        function confirmDelete(url) {
            Swal.fire({
                title: 'Delete Record?',
                text: 'This action cannot be undone.',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#dc2626',
                cancelButtonColor: '#64748b',
                confirmButtonText: 'Yes, Delete',
                cancelButtonText: 'Cancel',
                reverseButtons: true
            }).then(function (result) {
                if (result.isConfirmed) {
                    window.location.href = url;
                }
            });
        }
    </script>
